<template>
  <a-modal
    title="排序"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="序号"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-input
          v-decorator="[
            'seqNum',
            {rules: [{ required: true, message: '请输入序号' }]}
          ]"
          name="seqNum"
          placeholder="请输入序号" />
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button key="cancel" @click="handleCancel">取消</a-button>
      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext()">确认</a-button>
    </template>
  </a-modal>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'SeqNumModal',
  components: {
  },
  data () {
    return {
      id: '',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  mounted () {
  },
  methods: {
    ...mapActions(['IntoSeqNum']),
    seqNum (record) {
      this.visible = true
      this.id = record.id
      this.$nextTick(() => {
        this.form.setFieldsValue({ 'seqNum': record.seqNum })
      })
    },
    handleNext () {
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoading = true
          var data = {
            id: this.id,
            seqNum: values.seqNum
          }
          this.IntoSeqNum(data)
            .then((res) => this.submitSuccess(res))
            .catch(err => this.requestFailed(err))
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    },
    submitSuccess (res) {
      if (res.status === 200 || res.status === '200') {
        this.$notification['success']({
          message: '成功',
          description: '修改成功',
          duration: 4
        })
        setTimeout(() => {
          this.confirmLoading = false
          this.visible = false
          this.$emit('ok', res)
        }, 1000)
      } else {
        this.requestFailed(res)
      }
    },
    requestFailed (err) {
      this.$notification['error']({
        message: '错误',
        description: err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
      setTimeout(() => {
        this.confirmLoading = false
      }, 1000)
    }
  }
}
</script>
